import {Button, Col, Row, Tree} from "antd";
import {useNavigate} from "react-router-dom";
import CustomSearch from "@/pages/Components/Search";
import {
  CarryOutOutlined,
  EditOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  PlusOutlined
} from "@ant-design/icons";
import {useState} from "react";
import './index.scss'

const treeData = [
  {
    title: (
      <span>
        <span>院区</span>
         <EditOutlined style={{ marginLeft: 232 }} />
         <PlusCircleOutlined style={{ marginLeft: 10 }}/>
      </span>
    ),
    key: '0-0',
    icon: <CarryOutOutlined />,
    children: [
      {
        title:  (
          <span>
           实验室
            <EditOutlined style={{ marginLeft: 170 }} />
             <PlusCircleOutlined style={{ marginLeft: 10 }} />
             <MinusCircleOutlined style={{ marginLeft: 10 }} />
          </span>
        ),
        key: '0-0-0',
        icon: <CarryOutOutlined />,
        children: [
          {
            title: (
              <span>
                 专业组
                 <EditOutlined style={{ marginLeft: 170 }} />
                 <MinusCircleOutlined style={{ marginLeft: 10 }} />
              </span>
            ),
            key: '0-0-0-0',
            icon: <CarryOutOutlined />,
            children: [
              {
                title: (
                  <span>
                    人员
                    <EditOutlined style={{ marginLeft: 136 }} />
                    <PlusCircleOutlined style={{ marginLeft: 10 }} />
                    <MinusCircleOutlined style={{ marginLeft: 10 }} />
                  </span>
                ),
                key: '0-0-0-0-1',
                icon: <CarryOutOutlined />,
              },

            ]
          },
        ],
      },
    ],
  },
];
const OrganList = ()=>{



  const navigate = useNavigate()

  const add = ()=>{
    navigate('/system/organization/add-organization')
  }

  // const [data,setData] = useState(treeData)


  // const data = ()=>{
  //   return (
  //
  //   )
  // }
  const titleRender = (e)=>{


    // if(e.children){
    //   console.log('children',e.children)
    //   return  (
    //     <span>
    //     <span>实验室</span>
    //       <EditOutlined style={{ marginLeft: 170 }} />
    //       <PlusCircleOutlined style={{ marginLeft: 10 }} />
    //       <MinusCircleOutlined style={{ marginLeft: 10 }} />
    //   </span>
    //   )
    // }
    console.log('e',e)

    return  (
      <span>
        <span>院区</span>
         <EditOutlined style={{ marginLeft: 232 }} />
         <PlusCircleOutlined style={{ marginLeft: 10 }}/>
      </span>
    );
    // return <Title>院区</Title>
  }


  return (

    <div className='organ'>
      <div style={{padding:'20px'}}>
            <Button onClick={add} type='primary' icon={<PlusOutlined />} style={{margin:'10px 0'}}>新增部门</Button>
            <CustomSearch />
            <Tree
              virtual={false}
              motion={false}
              style={{backgroundColor:'beige'}}
              showLine={
                true
              }
              selectable={false}
              defaultExpandedKeys={['0-0-0']}
              treeData={treeData}
              // titleRender={titleRender}
            />

      </div>
      <div style={{height:'calc(100vh - 240px)',width:'2px',backgroundColor:'black',margin:'20px' }}></div>
      <div>right</div>

    </div>
  )
}

export default OrganList